// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;
@use 'includes/lib' as *;

main {
    h1, h2, h3, h4, h5, h6 {
        line-height: $vpn-title-line-height;
        font-family: var(--body-font-family);
    }

    .u-title-xl {
        @include font-size($vpn-title-lg-size);
        line-height: 1.2;

        @media #{$mq-md} {
            @include font-size($vpn-title-xl-size);
        }
    }

    .u-title-lg {
        @include font-size($vpn-title-md-size);
        line-height: 1.2;

        @media #{$mq-md} {
            @include font-size($vpn-title-lg-size);
        }
    }

    .u-title-md {
        @include font-size($vpn-title-sm-size);
        line-height: 1.2;

        @media #{$mq-md} {
            @include font-size($vpn-title-md-size);
        }
    }

    .u-title-xs {
        @include font-size($vpn-title-2xs-size);
        line-height: 1.2;

        @media #{$mq-md} {
            @include font-size($vpn-title-xs-size);
        }
    }

    .u-body-lg {
        @include text-body-lg;
    }
}

.c-page-title {
    @include font-size($vpn-title-xl-size);
    line-height: 1.2;

    @media #{$mq-md} {
        @include font-size($vpn-title-2xl-size);
    }
}

.c-page-subtitle {
    font-weight: normal;
    margin-bottom: $spacing-2xl;
}

.c-section-title {
    @include font-size($vpn-title-md-size);
    text-align: center;
    margin-bottom: $spacing-2xl;

    @media #{$mq-md} {
        @include font-size($vpn-title-lg-size);
    }

    &.t-small {
        @include font-size($vpn-title-xs-size);

        @media #{$mq-md} {
            @include font-size($vpn-title-sm-size);
        }
    }

    #mozilla-vpn-features & {
        color: $color-violet-60;
    }
}

.c-section-more {
    @include font-size($vpn-title-xs-size);
    font-weight: bold;
    text-align: center;

    @media #{$mq-md} {
        @include font-size($vpn-title-sm-size);
    }
}

.c-aside {
    text-align: center;
}

.c-guarantee {
    @include text-body-sm;
    color: $color-moz-green-mid;
    font-weight: bold;
    margin: 0 auto;
    text-align: center;

    &::before {
        @include bidi((
            (background-position, top left, top right),
            (padding-right, $spacing-xs, padding-left, 0),
        ));
        background-image: url('/media/img/products/vpn/common/check-green.svg');
        background-repeat: no-repeat;
        content: '';
        display: inline-block;
        height: 16px;
        position: relative;
        top: 2px;
        width: 16px;
    }
}

.t-content-body {
    a:link,
    a:visited {
        color: $color-black;
        text-decoration: underline;
    }

    a:hover,
    a:active,
    a:focus {
        color: $color-black;
        text-decoration: none;
    }
}

// * -------------------------------------------------------------------------- */
// Press section

.c-press {
    background: $color-green-30;
    text-align: center;
    padding-top: $layout-md;
    padding-bottom: $layout-md;

    blockquote {
        border: none;
        font-family: var(--body-font-family);
        padding: 0;
        margin-bottom: $layout-lg;

        p {
            @include text-body-xl;
            font-weight: normal;
        }

        @media #{$mq-lg} {
            margin-bottom: 0;
        }
    }
}

.c-footer-legal {
    @include text-body-sm;
    text-align: center;
}
